﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位添加</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入qs库 -->
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.3/dist/qs.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        /* 样式保持不变 */
    </style>
</head>
<body>
    <div id="app" class="job-form-container">
        <div class="breadcrumb">
            <span>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位设置--职位添加</span>
        </div>

        <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
            <el-form-item label="属性种类" prop="attribute_kind">
                <el-input v-model="formData.attribute_kind"></el-input>
            </el-form-item>

            <el-form-item label="属性名称" prop="attribute_name">
                <el-input v-model="formData.attribute_name"></el-input>
            </el-form-item>

            <el-form-item class="el-button-group">
                <el-button type="primary" v-on:click ="handleSubmit">提交</el-button>
                <el-button v-on:click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        const { createApp, ref } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            setup() {
                // 表单数据（与后端模型完全一致）
                const formData = ref({
                    attribute_kind: '',
                    attribute_name: ''
                });

                // 验证规则
                const rules = ref({
                    attribute_kind: [{ required: true, message: '请输入属性种类', trigger: 'blur' }],
                    attribute_name: [{ required: true, message: '请输入属性名称', trigger: 'blur' }]
                });

                const formRef = ref(null);

                const handleSubmit = async () => {
                    await formRef.value.validate((valid) => {
                        if (!valid) return;
                    });

                    console.log('提交的数据:', formData.value); // 检查数据是否正确

                    try {
                        const response = await axios.post(
                            "/config/public_char_add",
                            Qs.stringify(formData.value), // 序列化为表单数据
                            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                        );

                        if (response.data.success) {
                            ElMessage.success('职位添加成功');
                            window.location.href = '/config/config_public_char';
                        } else {
                            ElMessage.error(`操作失败：${response.data.message}`);
                            console.log('服务器错误:', response.data);
                        }
                    } catch (error) {
                        ElMessage.error('请求失败，请检查网络或输入');
                        console.error(error);
                    }
                };

                const goBack = () => window.history.back();

                return { formData, rules, formRef, handleSubmit, goBack };
            }
        })
        .use(ElementPlus, { locale: ElementPlusLocaleZhCn })
        .mount('#app');
    </script>
</body>
</html>